{extend name="public/common"}
{block name="style"}
<link rel="stylesheet" href="__HOME__/css/common/mui.min.css">
<link rel="stylesheet" href="__ADMIN__/css/chosen/chosen.css">
<style>
    body{
        background: #fff;
    }
    .personal-intro{
        height:28.6vw;
        border-bottom: 1px solid #d4d4d4;
        position: relative;
    }
    .intro{
        display: flex;
        align-items:center;
        height:20vw;
    }
    .personal-intro img{
         float: left;
         width: 11.2vw;
         height: 11.2vw;
         border-radius: 50%;
        margin-left: 10vw;
     }
    .personal-intro .name{
        font-family: "微软雅黑";
        float: left;
        margin-left: 3vw;
        color: #000;
        font-size: 2rem;
        overflow: hidden;
        max-width:30vw;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
    p{
        margin-bottom: 0;
    }
    .personal-intro .position{
        font-family: "微软雅黑";
        margin-left: 3vw;
        font-size: 1.3rem;
        color: #333;
        width: 50vw;
        overflow:hidden;
        text-overflow:ellipsis;
        display:-webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;
    }
    .personal-intro .date{
        position: absolute;
        bottom:2vw;
        width:100%;
    }
    .personal-intro .date a:after{
        display: inline-block;
        content: '';
        width: 0;
        height: 0;
        border-left: 0.4rem solid transparent;
        border-right: 0.4rem solid transparent;
        border-top: 0.6rem solid #b2b3b4;
        margin-left: 0.3rem;
        position: relative;
        top: -0.1rem;
    }
    .personal-intro .year,.personal-intro .mouth{
        display: inline-block;
        width:20.4vw;
        height:6.13vw;
        background: #eee;
        border-radius: 3px;
        text-align: center;
        line-height: 6.13vw;
        color: #010101;
        font-size: 1.3rem;
    }
    .personal-intro .year{
        margin-left: 8vw;
    }
    .personal-intro .mouth{
        margin-left: 5vw;
    }
    .list .daily{
        width:100vw;
        height:7.33vw;
        background: #f1f1f1;
    }
    .list .daily p{
        color: #898989;
        font-size: 1.3rem;
        font-family: "黑体";
        line-height: 7.33vw;
        margin-left: 10vw;
    }
    .list ul a{
          height:12.33vw;
          line-height:12.33vw;
          display: flex;
          align-items: center;
          position: relative;
      }
    .list ul a:after{
        display: block;
        content: '';
        height: 1px;
        width: 85vw;
        position: absolute;
        /* bottom: 0; */
        margin-left: 10vw;
        left:0;
        top:12vw;
        /*margin-top: 6vw;*/
        background: #f1f1f1;
     }
    .list ul a:last-child:after{
        display: none;
    }
    .list ul a .time{
          width: 2.5rem;
          height: 2.5rem;
          background: #09a536;
          font-size: 1rem;
          color: #fff;
          font-family: "微软雅黑";
          border-radius: 50%;
          line-height: 8vw;
          display: inline-flex;
          justify-content: center;
          align-items: center;
          margin-left: 5vw;
      }
    .list ul a .title{
        font-size: 1.3rem;
        color: #000;
        font-family: "微软雅黑";
        margin-left: 5vw;
        overflow: hidden;
        width: 73%;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: inline-block;
    }
    .list ul a .scan{
        color: red;
        margin-left: 2vw;
        width: 0;
    }
    .list ul a i.fa{
        float: right;
        line-height: 9.33vw;
        margin-right: 5vw;
        color: #999;
    }
    .mui-popover .mui-table-view{
        text-align: center;
    }

    header.mui-bar {
        display: none !important;
    }

    .mui-bar-nav ~ .mui-content {
        padding: 0 !important;
    }

    #topPopover {
        position: fixed;
        top: 16px;
        right: 6px;
    }

    #topPopover .mui-popover-arrow {
        left: auto;
        right: 6px;
    }

    span.mui-icon {
        font-size: 14px;
        margin-left: -15px;
        padding-right: 10px;
    }
    #popover {
        height: 10rem;
    }
    @media screen and ( min-width: 800px){
        #popover {
            height: 300px;
        }
    }
    #popover2 {
        height: 300px;
    }
    .defaults img {
        width: 16vw;
        position: absolute;
        left: 50%;
        margin-left: -8vw;
        top: 50%;
    }

    /*suspension button*/
    @keyframes rotate {
        0% {
            transform:rotate(0deg);
        }
        50% {
            transform:rotate(180deg);
        }
        100% {
            transform:rotate(360deg);
        }
    }
    .showbox {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 5%;
        background: rgba(0, 0, 0, 0.3);
        display: none;
    }

    .loader {
        position: relative;
        margin: 0 auto;
        width: 100px;
        margin-top: 70%;
    }
    .loader:before {
        content: '';
        display: block;
        padding-top: 50%;
    }

    .circular {
        animation: rotate 2s linear infinite;
        height: 100%;
        transform-origin: center center;
        width: 100%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }

    .path {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
        animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
        stroke-linecap: round;
    }

    @keyframes rotate {
        100% {
            transform: rotate(360deg);
        }
    }
    @keyframes dash {
        0% {
            stroke-dasharray: 1, 200;
            stroke-dashoffset: 0;
        }
        50% {
            stroke-dasharray: 89, 200;
            stroke-dashoffset: -35px;
        }
        100% {
            stroke-dasharray: 89, 200;
            stroke-dashoffset: -124px;
        }
    }
    @keyframes color {
        100%,
        0% {
            stroke: #d62d20;
        }
        40% {
            stroke: #0057e7;
        }
        66% {
            stroke: #008744;
        }
        80%,
        90% {
            stroke: #ffa700;
        }
    }
</style>
{/block}
{block name="body"}
<div class="personal-intro">
    <div class="intro">
    <img src="{$msg.header}">
    <p class="name">{$msg.name}</p>
    <p class="position">{$msg.xuexiao}</p>
    </div>
    <div class="date">
        <a class="year" id="openPopover" href="#popover"></a>
        <a class="mouth" id="openPopover2" href="#popover2"></a>
        <span style="color: red;float: right;margin-right: 3vw;font-size: 1.4rem">√：已阅</span>
    </div>
</div>
<div class="list">

</div>
<div id="popover" class="mui-popover" >
    <ul class="mui-table-view">
        {empty name="years"}
        <li class="mui-table-view-cell"><a>{$msg.year}年</a></li>
        {else/}
        {volist name="years" id="vo"}
        <li class="mui-table-view-cell"><a>{$vo.year}年</a></li>
        {/volist}
        {/empty}
    </ul>
</div>

<div id="popover2" class="mui-popover" >
    <div class="mui-scroll-wrapper">
        <div class="mui-scroll">
    <ul class="mui-table-view">
        <li class="mui-table-view-cell"><a>所有</a></li>
        <li class="mui-table-view-cell"><a>1月</a></li>
        <li class="mui-table-view-cell"><a>2月</a></li>
        <li class="mui-table-view-cell"><a>3月</a></li>
        <li class="mui-table-view-cell"><a>4月</a></li>
        <li class="mui-table-view-cell"><a>5月</a></li>
        <li class="mui-table-view-cell"><a>6月</a></li>
        <li class="mui-table-view-cell"><a>7月</a></li>
        <li class="mui-table-view-cell"><a>8月</a></li>
        <li class="mui-table-view-cell"><a>9月</a></li>
        <li class="mui-table-view-cell"><a>10月</a></li>
        <li class="mui-table-view-cell"><a>11月</a></li>
        <li class="mui-table-view-cell"><a>12月</a></li>
    </ul>
        </div>
    </div>

</div>

<!--[悬浮按钮]-->
<div class="showbox">
    <div class="loader">
        <svg class="circular" viewBox="25 25 50 50">
            <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
        </svg>
    </div>
</div>
{/block}
{block name="script"}
<script src="__HOME__/js/mui.js"></script>
<script src="__HOME__/js/reset.js"></script>
<script src="__ADMIN__/js/chosen.jquery.js"></script>
<script>
    $('title').text('点对点教育VIP学员_每日一句');
    //关闭分享
    function onBridgeReady() {
        WeixinJSBridge.call('hideOptionMenu');
    }
    if (typeof WeixinJSBridge == "undefined") {
        if (document.addEventListener) {
            document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
        } else if (document.attachEvent) {
            document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
            document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
        }
    } else {
        onBridgeReady();
    }
    $(".showbox").hide();
    $(function(){
        if(document.getElementById("publish")){
            moveanyway("publish");
        }
    })
    mui('.mui-scroll-wrapper').scroll();
    var tran_yy = "{$msg.year}";
    var tran_mm = "{$msg.mouth}";
    if (localStorage.getItem("tran_yy") !="" && localStorage.getItem("tran_yy") !=null){
        tran_yy =localStorage.getItem("tran_yy");
        tran_mm = localStorage.getItem("tran_mm");
    }
    $("#openPopover").html(tran_yy+"年");
    if(tran_mm == 0){
        $("#openPopover2").html("所有");
    }else{
        $("#openPopover2").html(tran_mm+"月");
    }
    $(".list ul li").each(function(){
        $(this).remove();
    });
    var userid ="{$msg.openid}";
    $.ajax({
        type:"post",
        url: "{:Url('Translate/personal')}",
        data:{
            year:tran_yy,
            month:tran_mm,
            openid:userid
        },
        beforeSend: function(XMLHttpRequest){
            $(".showbox").show();
        },
        success:function(data){
            $(".showbox").hide();
            if(data.data.length !== 0){
                addCourse(data);
            }else{
                $(".list").html('<div class="defaults"><img src="__HOME__/images/common/nomessage.png" alt="暂无消息"> </div>')
            }
        }
    })
    $("#popover ul li").click(function(){
        var select_it = $(this).text();
        $("#openPopover").html(select_it);
        mui('#popover').popover("hide");
        var year =  parseInt($("#openPopover").html());
        if($("#openPopover2").html()=="所有"){
            var month =  0;
        }else{
            var month =  parseInt($("#openPopover2").html());
        }
        localStorage.setItem("tran_yy",year);
        localStorage.setItem("tran_mm",month);
        ajax(year,month);

    });

    $("#popover2 ul li").click(function(){
        var select_it = $(this).text();
        $("#openPopover2").html(select_it);
        var year =  parseInt($("#openPopover").html());
        if($("#openPopover2").html()=="所有"){
            var month =  0;
        }else{
            var month =  parseInt($("#openPopover2").html());
        }
        localStorage.setItem("tran_yy",year);
        localStorage.setItem("tran_mm",month);
        ajax(year,month);
        mui('#popover2').popover("hide");
    });

    var ajax = function(year,month){
        $.ajax({
            type:"post",
            url: "{:Url('Translate/personal')}",
            data:{
                year:year,
                month:month,
                openid:userid
            },
            beforeSend: function(XMLHttpRequest){
                $(".showbox").show();
            },
            success:function(data){
                $(".showbox").hide();
                if(data.data.length !== 0){
                    addCourse(data);
                }else{
                    $(".list").html('<div class="defaults"><img src="__HOME__/images/common/nomessage.png" alt="暂无消息"> </div>')
                }
            }
        })
    }

    function addCourse(data){
        var openid = "{$msg.openid}";
        var html = '';
        var lists = data.data;
        for(var j = 12;j >0 && j < 13;j--){
            if (j in lists){
                var len = lists[j].length;
                html += '<div class="daily">'+
                        '<p>'+j+'月（共'+len+'篇翻译）</p>'+
                        '</div>'+
                        '<ul>'
                for(var i = 0; i< len;i++){
                    var list = lists[j][i];
                    html +=
                            '<a href="/DDDeducation/public/index.php/home/Translate/detail/openid/'+openid+'/id/'+list.id+'.html">'
                    if(list.scan == 1){
                        html+='<span class="scan">√</span>';
                    }else{
                        html+='<span class="scan"></span>';
                    }
                            html+='<span class="time">'+list.day+'日</span>'+
                            '<span class="title">'+list.title+'</span>'+
                            '<i class="fa fa-angle-right" aria-hidden="true"></i>'+
                            '</a>'
                }
                html+='<ul>'
            }
        }
        $('.list').html(html);
    }

    window.onpageshow = function(e){
        if(e.persisted){
            window.location.reload();
        }
    }
</script>

{/block}